<template>
    <div class="customers">
        <div class="w1200">
            <h3 class="customers-title">合作伙伴</h3>
            <p class="customers-subtitle">为您的生意兴隆之路保驾护航</p>

            <ul class="brand-grid">
                <li class="brand-card" v-for="(item, index) in partnerList" :key="index">
                    <img :src="item.img" alt="" />
                </li>
            </ul>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const partnerList = ref([
    { img: 'https://image.lutongjiakao.com/system/ed80ddd6539841ab9acc3d3cc9000e99.png' },
    { img: 'https://image.lutongjiakao.com/system/6de07689d2694a7d87ece2b2b2b4e242.png' },
    { img: 'https://image.lutongjiakao.com/system/4c4fd77183ee42a381130d756247a115.png' },
    { img: 'https://image.lutongjiakao.com/system/0a54416df71e4af5a308c386d9d6432c.png' },
    { img: 'https://image.lutongjiakao.com/system/434f289704a945f5a7e29697cffbf926.png' },
    { img: 'https://image.lutongjiakao.com/system/72743debbb864cfb9cf51ec9d4381aa2.png' },
    { img: 'https://image.lutongjiakao.com/system/39d26b02191946b3a491fd4df1346aad.png' },
    { img: 'https://image.lutongjiakao.com/system/7ee4744a70564dc0a942349219e695bb.png' },
    { img: 'https://image.lutongjiakao.com/system/594866416a2940fea86dfd1a9a6b825e.png' },
    { img: 'https://image.lutongjiakao.com/system/322ca20ae5a541c39fef14e122e65553.png' },
])
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.w1200 {
    width: rem(910);
    margin: 0 auto;
}

.customers {
    padding: rem(80) 0 0;
}

.customers-title {
    text-align: center;
    font-size: rem(35);
    font-weight: 800;
    color: #1f2533;
}

.customers-subtitle {
    text-align: center;
    margin-top: rem(10);
    margin-bottom: rem(26);
    color: #595959;
    font-size: rem(13);
}

.brand-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: rem(18);
}

.brand-card {
    height: rem(60);
    background: #fff;
    border-radius: rem(8);
    box-shadow: 1px 1px 8px #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.brand-card img {
    width: 100%;
    height: 100%;
}

.behavior {
    background-size: cover;
    background-image: url('https://xuantu.renderbus.com/_next/static/media/advantage-bg.e2a77b05.webp');
    height: rem(240);
    margin-top: rem(95);
    padding: rem(50) 0;
}
</style>
